<!-- components/s-tag/s-tag.vue -->
<template>
    <view class="s-tag" :class="[typeClass, sizeClass]">
      <slot></slot>
    </view>
  </template>
  
  <script>
  export default {
    name: 's-tag',
    props: {
      // 标签类型
      type: {
        type: String,
        default: 'default',
        validator: function(value) {
          return ['default', 'primary', 'success', 'warning', 'danger', 'info'].indexOf(value) !== -1
        }
      },
      // 标签大小
      size: {
        type: String,
        default: 'medium',
        validator: function(value) {
          return ['small', 'medium', 'large'].indexOf(value) !== -1
        }
      },
      // 是否圆角
      round: {
        type: Boolean,
        default: false
      },
      // 是否可关闭
      closable: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      typeClass() {
        return `s-tag--${this.type}`
      },
      sizeClass() {
        return `s-tag--${this.size}`
      },
      roundClass() {
        return this.round ? 's-tag--round' : ''
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .s-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4rpx 12rpx;
    font-size: 24rpx;
    line-height: 1;
    border-radius: 4rpx;
    box-sizing: border-box;
    white-space: nowrap;
    border: 1rpx solid transparent;
  
    // 类型样式
    &--default {
      color: #666;
      background-color: #f5f5f5;
      border-color: #d9d9d9;
    }
    
    &--primary {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
    }
    
    &--success {
      color: #fff;
      background-color: #67c23a;
      border-color: #67c23a;
    }
    
    &--warning {
      color: #fff;
      background-color: #e6a23c;
      border-color: #e6a23c;
    }
    
    &--danger {
      color: #fff;
      background-color: #f56c6c;
      border-color: #f56c6c;
    }
    
    &--info {
      color: #fff;
      background-color: #909399;
      border-color: #909399;
    }
  
    // 大小样式
    &--small {
      padding: 2rpx 8rpx;
      font-size: 20rpx;
    }
    
    &--medium {
      padding: 4rpx 12rpx;
      font-size: 24rpx;
    }
    
    &--large {
      padding: 6rpx 16rpx;
      font-size: 28rpx;
    }
  
    // 圆角样式
    &--round {
      border-radius: 100rpx;
    }
  }
  </style>